<template>
  <div>
    <a-drawer
      title="条码补打"
      :visible.sync="codeDrawer"
      closable
      @close="onClose"
      width="100%"
    >
      <a-form-model
        :layout="operationForm.layout"
        :model="operationForm"
        style="margin-bottom: 15px"
      >
        <a-form-model-item label="投料任务单号">
          <a-input
            allowClear
            v-model="operationForm.DeliveryId"
            placeholder="请输入"
          />
        </a-form-model-item>
        <!-- <a-form-model-item label="产线">
          <a-input v-model="operationForm.ProductLineCode" placeholder="请输入" />
        </a-form-model-item>
         <a-form-model-item label="投料点">
          <a-input v-model="operationForm.PointCode" placeholder="请输入" />
        </a-form-model-item> -->
        <a-form-model-item label="拉动条码">
          <a-input
            allowClear
            v-model="operationForm.PullNumber"
            placeholder="请输入"
          />
        </a-form-model-item>
        <a-form-model-item label="托盘编号">
          <a-input
            allowClear
            v-model="operationForm.CID"
            placeholder="请输入"
          />
        </a-form-model-item>
        <a-form-model-item label="计划日期">
          <a-date-picker
            v-model="operationForm.PlanDate"
            show-time
            type="date"
            allowClear
            :showTime="{ defaultValue: showTime }"
            :locale="locale"
            placeholder="请选择计划日期"
            style="width: 100%"
          />
        </a-form-model-item>
        <!-- <a-form-model-item label="扫描状态">
          <a-select
            v-model="operationForm.Status"
            style="width: 200px"
            placeholder="请选择生产计划状态"
            allowClear
          >
            <a-select-option value="创建">创建</a-select-option>
            <a-select-option value="漏扫"> 漏扫 </a-select-option>
            <a-select-option value="完成"> 完成 </a-select-option>
          </a-select>
        </a-form-model-item> -->
        <a-form-model-item>
          <a-button type="primary" @click="operationSearch"> 查询 </a-button>
        </a-form-model-item>
      </a-form-model>
      <a-table
        v-if="dataCode.length"
        :columns="columnsCode"
        :data-source="dataCode"
        :pagination="paginationCode"
        @change="handleTableChangeCode"
        :row-selection="rowSelection"
        :expanded-row-keys.sync="expandedRowKeys"
        :defaultExpandAllRows="true"
        bordered
        childrenColumnName="Details"
        :scroll="{ y: taskScroll }"
        show-size-changer
      >
        <template slot="footer">
          <div style="display: flex; justify-content: center">
            <a-popconfirm
              placement="top"
              ok-text="确定"
              cancel-text="取消"
              @confirm="confirm"
            >
              <template slot="title">
                <p>提示</p>
                <p>确定是否打印条码？</p>
              </template>
              <a-button type="primary" @click="codePrint">
                打 印 条 码
              </a-button>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </a-drawer>
  </div>
</template>

<script>
import { columnsCode } from "@/views/tableColumns";
import { api } from "@/utils/api";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import moment from "moment";
// import { GRES } from "./codeData";
import { IsPrintTool } from "@/utils/tools";

export default {
  props: ["workBenchCode", "drawer"],
  data() {
    return {
      codeDrawer: false,
      direction: "rtl",
      dataCode: [],
      flatDataCode: [],
      columnsCode,
      selectedRowKeys: [],
      expandedRowKeys: [],
      paginationCode: {
        pageIndex: 0,
        pageSize: 10,
      },
      operationForm: {
        layout: "inline",
        PlanDate: "",
        DeliveryId: "",
        ProductLineCode: "",
        PointCode: "",
        CID: "",
        PullNumber: "",
      },
      taskScroll: 300,
      locale,
    };
  },
  computed: {
    showTime: () => {
      return moment("00:00:00", "HH:mm:ss");
    },
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        selectedRowKeys,
        onChange: this.onSelectChange,
        hideDefaultSelections: true,
        selections: [],
        onSelectAll: this.onSelectAll,
        SELECTKEY: true,
        // onSelection: this.onSelection,
      };
    },
  },
  watch: {
    drawer(newVal, oldVal) {
      this.codeDrawer = newVal;
      if (newVal) {
        this.getTlPointtasks(this.paginationCode);
      }
    },
  },
  mounted() {
    // this.getTlPointtasks(this.paginationCode);
    this.taskScroll = window.innerHeight - 350;
  },
  methods: {
    onSelectAll(selected, selectedRows, changeRows) {
      if (this.SELECTKEY) {
        this.selectedRowKeys = [];
      }
      this.SELECTKEY = !this.SELECTKEY;
      // console.log(
      //   "selected, selectedRows, changeRows",
      //   selected,
      //   selectedRows,
      //   changeRows
      // );
    },
    onSelectChange(selectedRowKeys) {
      // console.log("selectedRowKeys changed: ", selectedRowKeys);
      let repertKeys = [...new Set(selectedRowKeys)];
      let selList = [];
      repertKeys.forEach((item) => {
        if (isNaN(item)) {
          selList.push(item);
        }
        let obj = this.dataCode.find((f) => f.key === item);
        // console.log(obj, "obj==", item);
        if (obj && obj.ChildKeys) selList = selList.concat(obj.ChildKeys);
        // console.log(obj, "obj", selList);
        // } else {
        //   selList.push(item);
        // }
      });
      // console.log("selList", [...new Set(selList)]);
      this.selectedRowKeys = [...new Set(selList)];
    },
    handleTableChangeCode(pagination) {
      console.log(pagination);
      this.paginationCode = pagination;
      this.getTlPointtasks({ pageIndex: pagination.current - 1, pageSize: 10 });
    },
    onClose() {
      this.codeDrawer = false;
      this.$emit("codeEmit", false);
    },
    confirm() {
      let flatList = this.dataCode.map((m) => m.Details).flat(Infinity);
      let resList = [];
      flatList.forEach((f) => {
        this.selectedRowKeys.forEach((F) => {
          if (f.key === F) {
            resList.push({
              PullNumber: f.PullNumber,
              DeliveryId: f.DeliveryId,
            });
          }
        });
      });
      if (resList.length < 1) {
        this.$message.warning("请选择条码打印");
        return;
      }
      resList.forEach((item) => {
        IsPrintTool(item, sessionStorage.getItem("userName"));
      });
      console.log("条码补打confirm", resList);
      setTimeout(() => {
        this.selectedRowKeys = [];
      }, 2000);
    },
    codePrint() {
      console.log("codePrint");
    },
    operationSearch() {
      let PlanDate = "";
      if (this.operationForm.PlanDate) {
        PlanDate = moment(this.operationForm.PlanDate).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.getTlPointtasks({
        pageIndex: 0,
        pageSize: 10,
        PlanDate,
      });
    },
    // 查询工位操作记录
    async getTlPointtasks(data = {}) {
      const [ProductLineCode, PointCode] = this.workBenchCode;
      const { DeliveryId, CID, PullNumber } = this.operationForm;
      if (data.current) delete data.current;
      if (data.total) delete data.total;
      const params = {
        ProductLineCode,
        PointCode,
        DeliveryId,
        CID,
        PullNumber,
        ...data,
      };
      let [ERR, GRES] = await api.getTlPointtasksAPI(params);
      if (GRES.code === 0) {
        const pagination = { ...this.paginationCode };
        console.log("key", GRES.data);
        pagination.total = GRES.totalcount;
        this.dataCode = GRES.data.map((M, I) => {
          // this.dataCode = GRES.data.map((M, I) => {
          if (M.Details && M.Details.length > 0) {
            M.Details = M.Details.map((m, i) => ({
              ...m,
              key: I + 1 + "-" + i,
              DeliveryId: M.DeliveryId,
            }));
            M.ChildKeys = M.Details.map((m, i) => I + 1 + "-" + i);
          }
          return {
            ...M,
            key: I + 1,
          };
        });
        this.paginationCode = pagination;
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>
